<template>
  <div>
    <my-banner></my-banner>
    <div class="playlists">
      <h3>热门歌单</h3>
      <ul class="title-type">
        <li v-for="(item, index) in playList_tag" :key="item.name+''+index">
          <span @click="selectType('playlist',item,index)" :class="{ weight: index == playlistIndex }">{{ item.name }}</span>
        </li>
      </ul>
      <play-list :playList="playList"></play-list>
    </div>
    <div class="newdvd">
      <h3>新碟上架</h3>
      <ul class="title-type">
        <li v-for="item in newdvdListType" :key="item.code">
          <span @click="selectType('album',item)" :class="{ weight: item.code === albumListItem }">{{ item.name }}</span>
        </li>
      </ul>
      <album-list :albumList="albumList"></album-list>
    </div>
    <div class="tophot">
      <h3>排行榜</h3>
      <div class="wrapper">
        <el-row :gutter="0">
          <el-col :span="6" v-for="(item,index) in topList" :key="item.id">
              <div class="song-content">
                   <el-image :src="item.coverImgUrl"></el-image>
                  <div class="song-top">
                      <h4 class="top-title">{{item.name}}</h4>
                  </div>
                  <ul class="song-footer">
                      <li v-for="(items,i) in songList[index] " :key="items.name+''+i">
                          <div class="song-left">{{i+1}}</div>
                          <router-link :to="{name:'Song',query:{id:items.id}}">
                          <div class="song-right">
                              <p>{{items.name}}</p>
                              <p>{{items.ar[0].name}}</p>
                          </div>
                          </router-link>
                      </li>    
                  </ul>
              </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="newmv">
        <h3>最新MV</h3>
        <ul class="title-type">
            <li v-for="(item,index) in  mv_type" :key="item+''+index">
          <span @click="selectType('mv',item,index)" :class="{ weight: index === mvlistIndex }">{{ item}}</span>
        </li>
        </ul>
        <mv-list :newMvList="newMvList"></mv-list>
    </div>
    <div class="hot-singer">
        <h3>热门歌手</h3>
        <div class="singer-content">
          <hot-singer :hotSingerList="hotSingerList"></hot-singer>
        </div>
    </div>
  </div>
</template>
<script>
import MyBanner from "@/components/common/Banner.vue";
import playList from "@/components/common/Play-list.vue";
import MvList from "@/components/common/MvList.vue";
import HotSinger from '@/components/common/Hot-singer.vue'
import  AlbumList from '@/components/common/Album-list.vue'
export default {
  components: {
    MyBanner,
    playList,
    AlbumList,
    MvList,
    HotSinger
  },
  data() {
    this.newdvdListType=[
        { name: "全部", code: "all" },
        { name: "华语", code: "zh" },
        { name: "欧美", code: "ea" },
        { name: "韩国", code: "kr" },
        { name: "日本", code: "jp" },
      ];
    this.mv_type=['最新', '内地', '港台', '欧美', '日本', '韩国'];
    return {
      playList_tag: [],
      playList: [],
      playList_params: { limit: 5, offset: 0, cat: "", order: "hot" }, //默认请求参数
      albumList: [],
      albumList_params: { limit: 9, offset: 0,area:'' },
      playlistIndex:0,
      albumListItem:'all',
      mvlistIndex:0,
      topList:[],
      songList:[],
      mv_params:{limit:10,offset:0,area:''},
      newMvList:[],
      hotSingerList:[],
      hotSingerList_params:{limit: 9, offset: 0 },
    };
  },
 async created() {
   await this.getHotPalyList();
   await this.getPlayList(this.playList_params);
   await this.getAmbulList(this.albumList_params);
   await this.getTopList();
   await this.getNewMv(this.mv_params);
    this.getHotSinger(this.hotSingerList_params);
  },
  computed: {},
  methods: {
    async getPlayList(params) {    //获取歌单列表
      const res = await this.$api.getPlayList(params);
      this.playList = res.playlists;
      //    console.log(res)
    },
    async getHotPalyList() {
      const res = await this.$api.getHotPalyList(); //获取热门歌单分类
      //    console.log(res)
      this.getPlayListTag(res);
    },
    async getAmbulList(params) {  //获取新碟
      const res = await this.$api.getAmbulList(params);
      // console.log(res)
      this.albumList = res.monthData.slice(0, 9); //只显示前九
      // console.log(this.albumList)
    },
    async getTopList(){           //排行榜
        const res = await this.$api.getTopList();
        // console.log(res)
        const data = res.list.slice(0,4);  //获取排行榜前四榜
        // console.log(data)
        this.topList = data;
        data.forEach( async item=>{         //对每个排行榜分别循环获取前六条数据
           const r = await this.$api.getSongList({id:item.id}); //获取每个排行榜前六音乐
          //  console.log(r);
          this.songList.push(r.playlist.tracks.slice(0,6))
          // console.log(this.songList)
        })
        // console.log(this.songList)
    },
    async  getNewMv(params){            //获取最新mv
          const res = await this.$api.getNewMv(params)
          // console.log(res);
          this.newMvList = res.data;
    },
    async getHotSinger(params){   //热门歌手
      const res = await this.$api.gethotSinger(params)
          // console.log(res);
          this.hotSingerList = res.artists;
          // console.log(this.hotSingerList);
    },
    getPlayListTag(res) {
      const tag = res.tags.slice(0, 5); //只显示前6条热门分类
      tag.unshift({ name: "为您推荐" });
      this.playList_tag = tag;
      //    console.log(this.playList_tag)
    },
      selectType(type,item,index){
        switch(type){
          case 'playlist':
            this.playList_params.cat=item.name==='为您推荐'?"":item.name;
            this.playlistIndex=index;
            this.getPlayList(this.playList_params)
            break;
          case 'album':
            this.albumListItem=item.code;
            this.albumList_params.area=item.code;
            this.getAmbulList(this.albumList_params);
            break;
          case 'mv':
            this.mvlistIndex=index;
            this.mv_params.area=item==='最新'?"":item;
            this.getNewMv(this.mv_params);
            break;
        }
      }
  },
};
</script>
<style lang="less" scoped>
//歌单列表样式
.playlists {
  width: 100%;
  min-height: 450px;
  margin-top: 20px;
}
//大区样式
h3 {
  width: 120px;
  height: 70px;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto;
  line-height: 70px;
}
//导航样式
.title-type {
  width: 480px;
  height: 50px;
  margin: 0 auto;
  //  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  li {
    height: 48px;
    width: 80px;
    // border: 1px solid #ccc;
    line-height: 48px;
    text-align: center;
    padding: 0 5px;
    cursor: pointer;
  }
  .weight {
    font-weight: 700;
    font-size: 16px;
    position: relative;
  }
  .weight::before {
    display: inline-block;
    content: "";
    position: absolute;
    width: 100%;
    height: 7px;
    background-color: red;
    bottom: 2px;
    left: 1px;
    border-radius: 3px;
    z-index: -1;
  }
}
//新碟上架样式
.newdvd {
  min-height: 500px;
  // width: 1200px;

  h3 {
    margin-top: 40px;
  }
  .weight::before {
    width: 32px;
  }
}
//排行榜样式
.tophot {
  min-height: 500px;
  width: 1200px;
  margin: 0 auto;
  h3 {
    margin-top: 40px;
  }
  .wrapper {
    .el-row {
      min-height: 500px;
      margin-right: -40px;
      .el-col {
        // border: 1px solid #ccc;
        min-height: 500px;
        overflow: hidden;
        margin-right: 10px;
        width: 295px;
        border-radius: 4px;
      }
    }
    .song-content{
        display: flex;
        flex-direction: column;
         position: relative;
          .el-image{
                position: absolute;
                height: 500px;
                z-index: -1;
                filter: blur(50px);
                transform: scale(1.5);
            }
        .song-top{
            margin-top: 20px;
            height: 60px;
            // border: 1px solid #ccc;
            position: relative;
           .top-title{
                font-size: 28px;
                text-align: center;
                line-height: 32px;
                width: 205px;
                height: 32px;
                color: #fff;
                margin: 0 auto;
            }
           .top-title::after{
               display: block;
               content: '';
               width: 30px;
               height: 3px;
               background-color: #fff;
               position: absolute;
               bottom: 0;
               left: 125px;
            }
        }
        .song-footer{
            margin-top: 20px;
            // border: 1px solid yellow;
        //    height: 400px;
           li{
               display: flex;
                // border: 1px solid yellow;
                height: 69px;
                margin-left: 20px;
                .song-left{
                    font-size: 18px;
                    width: 20px;
                    height: 49px;
                    color: #fff;
                    padding-top: 3px;
                    // border: 1px solid red;
                }
                .song-right{
                   min-width: 136px;
                     height: 49px;
                     p{
                        font-size: 14px;
                        padding: 5px;
                        color: #fff;
                        text-align: left;
                        //  border: 1px solid blue;
                    }
                }
           }
        }
    }
  }
}
//最新mv样式
.newmv{
    width: 1200px;
    min-height: 500px;
    // border: 1px solid #ccc;
    margin: 0 auto;
    margin-top: 40px;
    h3{
        margin-top: 40px;
    }
    .weight::before {
    width: 32px;
  }
}
.hot-singer{
  h3{
    margin-top: 40px;
  }
}
</style>
